<script>
import { defineComponent } from "vue";
import store from "@/store";

export default defineComponent({
  created() {
    const lang = localStorage.getItem("lang") || "zh-cn";
    this.changeLang(lang);
  },
  computed: {
    // 系统语言
    lang() {
      return store.getters["webset/lang"];
    },
    langText() {
      return this.lang === "en" ? "中" : "En";
    },
  },
  methods: {
    // 切换语言
    changeLang(lang) {
      const l = lang ? lang : this.lang === "en" ? "zh-cn" : "en";
      store.dispatch("webset/changeLang", l);
      this.$i18n.locale = l;
    },
  },
});
</script>

<template>
  <span class="action">
    <span class="btn-box" @click="changeLang()">
      {{ langText }}
    </span>
  </span>
</template>

<style lang='less' scoped>
.btn-box {
  padding: @padding-xss;
  border: @border-width-base @border-style-base @border-color-base;
}
</style>